<template>
	<view class="content">
		<u-navbar height="50" back-icon-color="#333" title="设置" title-color="#333" title-size="36">
		</u-navbar>
		<view class="imageHeadView" @click="onUpload()">
			<u-avatar :src="userInfo.avatar_format" mode="circle" size="180"></u-avatar>
			<view class="headTitle">点击修改头像</view>
		</view>
		<view class="itemView" >
			<text class="itemTitle">用户昵称</text>
			<view class="itemText">{{userInfo.nickname}} <span class="icon"></span></view>
		</view>
		<view class="itemView">
			<text class="itemTitle">用户手机号</text>
			<text class="itemText">{{userInfo.phone}}</text>
		</view>
		<view class="itemView">
			<text class="itemTitle">角色类型</text>
			<text class="itemText">普通用户/商家</text>
		</view>
		<view class="itemView" @click="go('/page/agreement/agreement?type=1')">
			<text class="itemTitle">用户协议</text>
			<span class="itemText icon"></span>
		</view>
		<view class="itemView" @click="go('/page/agreement/agreement?type=2')">
			<text class="itemTitle">隐私政策</text>
			<span class="itemText icon"></span>
		</view>
		<view class="itemBottom">
			<view class="exitView" @click="exitLogin()">退出登录</view>
		</view>
		<u-popup v-model="show" mode="center" border-radius="14" width="500rpx">
			<view class="showBox">
				<u-field v-model="text" :label="title" :placeholder="context" :type="type">
				</u-field>
				<view class="confirm" @click="save">
					确认
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		getUserInfo,
		changeAvater,
		upUserInfo
	} from '@/api/user.js'
	import config from '@/config/config.js'
	import {
		toast
	} from '../../utils/common';
	export default {
		data() {
			return {
				showPopup: false,
				inputModal: false,
				messageModal: false,
				messageText: '',
				userInfo: '',
				realname: '',
				isPassword: 0,
				title: "",
				context: "",
				type: "",
				show: false,
				text: "",
				current: ""
			}
		},
		onShow() {
			this.onUserInfo();
		},
		methods: {
			open(index) {
				this.current = index
				if (index == 1) {
					this.title = '用户名'
					this.context = '请输入用户名'
					this.type = 'text'
				} else {
					this.title = '手机号'
					this.context = '请输入手机号'
					this.type = 'number'
				}
				this.show = true

			},
			onUserInfo() {
				let self = this
				getUserInfo().then(res => {
					self.userInfo = res.data;
				})
				// self.$user.userInfo({
				// 	userid: uni.getStorageSync("userid")
				// }, false).then(res => {
				// 	self.userInfo = res.data;
				// });
			},
			onUpload() {
				let self = this;
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['camera', 'album'],
					success: function(res) {
						uni.showLoading({
							title: '正在上传',
							mask: true
						});
						uni.uploadFile({
							url: config.baseUrl + '/api/public/images/upload',
							filePath: res.tempFilePaths[0],
							name: 'file',
							success: (res) => {
								if (res.statusCode == 200) {
									let data = JSON.parse(res.data);
									if (data.data) {
										self.upHeadImage(data.data);
									}
									uni.hideLoading();
								}
							},
							complete(res) {
								uni.hideLoading();
							}
						})
					}
				});
			},
			upHeadImage(path) {
				let self = this;
				changeAvater({
					avatar: path
				}).then(res => {
					self.onUserInfo();
				})
				// self.$user.setAvatar({
				// 	avatar: path
				// }, true).then(res => {
				// 	self.onUserInfo();
				// });
			},
			onRealName() {
				this.inputModal = true;
			},
			onLoginPwd() {
				this.$utils.jump('/pages/edit-login-pwd/edit-login-pwd');
			},
			go(url) {
				uni.navigateTo({
					url
				})
			},
			onSetPassword() {
				if (this.isPassword == 1) {
					this.$utils.jump('/pages/edit-money-password/edit-money-password');
				} else {
					this.$utils.jump('/pages/set-money-password/set-money-password');
				}
			},
			onLogout() {
				this.messageType = 0;
				this.messageText = "确定要注销账号吗？";
				this.messageModal = true;
			},
			exitLogin() {
				// this.messageType = 1;
				// uni.setStorageSync('isLogin', false);
				// uni.setStorageSync('access_token', '');
				uni.clearStorageSync();
				uni.switchTab({
					url: '/pages/ucenter/ucenter'
				});
				setTimeout(function() {
					toast('已退出登录')
				}, 500);
			},
			onModalConfirm() {
				let self = this;
				this.messageModal = false;
				if (this.messageType == 0) {
					//注销账号
				} else {
					uni.setStorageSync('isLogin', false);
					uni.setStorageSync('access_token', '');
					uni.removeStorageSync('access_token');
					uni.switchTab({
						url: '/pages/ucenter/ucenter'
					});
					setTimeout(function() {
						toast('已退出登录')
					}, 500);
				}
			},
			onInputConfirm() {
				let self = this;
				self.$user.realnameChange({
					realname: this.realname
				}, true).then(res => {
					self.$utils.tips('设置成功');
					setTimeout(function() {
						self.onUserInfo();
					}, 500);
				});
			},
			save() {
				let obj = {}
				if (this.current == 1) {
					obj = {
						realname: this.text
					}
				} else {
					obj = {
						phone: this.text
					}
				}
				upUserInfo(obj).then(res=>{
					console.log(res);
				})


			}
		}
	}
</script>

<style>
	@import url('settings.css');

	page {
		height: 100%;
		background-color: #F9F9F9;
	}

	.showBox {
		padding: 40rpx 0;
		min-height: 240rpx;
		background-color: #ffffff;
	}

	.confirm {
		border-radius: 40rpx;
		width: 200rpx;
		height: 80rpx;
		text-align: center;
		line-height: 80rpx;
		color: #fff;
		background-color: #fc5830;
		margin: 30rpx auto;
	}
</style>